<template>
    <div class="dealerStatistics">

      <van-row class="dealerStatistics-top">
        <van-col span="6">
          <van-button style="width:100%;"  @click="timePopup=true">时间<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col  span="6">
          <van-button style="width:100%;"  @click="customer=true">客户<i class="iconfont icon-xia"></i></van-button>
        </van-col>
        <van-col span="6">
          <van-button style="width:100%;"  @click="storesShow=true">店仓<i class="iconfont icon-xia"></i></van-button>
        </van-col>
         <van-col span="6">
           <van-button style="width:100%;"  @click="sortShow=true">排序<i class="iconfont icon-xia"></i></van-button>
         </van-col>
      </van-row>

      <div class="dealerStatistics-menu">
        <p style="margin:0 0 10px 0;">
          当前库存:
          <span :style="{color:color}">{{kucun}}</span>
        </p>
        <div style="display: flex">
          <div style="width:33.33%;border-right:1px solid #ddd;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <p style="margin:0;">入库总数</p>
            <span :style="{color:color}">{{rk_num}}</span>
            <p style="margin:5px 0 0 0">总金额</p>
            <span :style="{color:color}">￥{{rk_money}}</span>
          </div>
          <div style="width:33.33%;border-right:1px solid #ddd;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <p style="margin:0;">退货总数</p>
            <span :style="{color:color}">{{th_num}}</span>
            <p style="margin:5px 0 0 0">总金额</p>
            <span :style="{color:color}">￥{{th_money}}</span>
          </div>
          <div style="width:33.33%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
            <p style="margin:0;">销售总数</p>
            <span :style="{color:color}">{{xs_num}}</span>
            <p style="margin:5px 0 0 0">总金额</p>
            <span :style="{color:color}">￥{{xs_money}}</span>
          </div>
        </div>

      </div>

      <!--列表-->
      <div class="dealerStatistics-content">

        <van-list
          v-model="loading"
          :finished="finished"
          @load="getAllFn"
        >
          <div v-if="typeof dataList=='string'" style="color:#ddd;padding:10px 0;background: #fff;">{{dataList}}</div>
          <van-row v-else style="padding:1% 10px;margin:15px 0;background: #fff;
    border-radius: 3px;" v-for="(item,index) in dataList" :key="index" @click.native="infoFn(item.customer_id,item.store_id,item.customer_name)">
            <van-col span="24" style="text-align: left;color:#000;">
              店铺名:【{{item.store_name}}】
            </van-col>
            <van-col span="24"  style="text-align: left;color:#000;padding:5px 0;">
              客户名:{{item.customer_name}}
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              入库数量: <span :style="{color:color}">{{item.rk_num}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              入库金额: <span :style="{color:color}">￥{{item.rk_money}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              退货数量: <span :style="{color:color}">{{item.th_num}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              退货金额: <span :style="{color:color}">￥{{item.th_money}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              销售数量: <span :style="{color:color}">{{item.xs_num}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              销售金额: <span :style="{color:color}">￥{{item.xs_money}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              库存: <span :style="{color:color}">{{item.kucun}}</span>
            </van-col>
            <van-col span="12"  style="text-align: left;padding:5px 0;">
              <span :style="{color:color}">查看详情</span>
            </van-col>
          </van-row>

          <div class="noDatas" :style="{display:block}">
            数据已加载完
          </div>
        </van-list>

      </div>

      <!--底部-->
      <div class="dealerStatistics-bottom">
        <p style="margin:0;">总条数: <span :style="{color:color}">{{total}}</span></p>
      </div>

      <!--时间弹层-->
      <van-popup v-model="timePopup" @click-overlay="getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev" class="timeMask" >
        <van-cell-group>
          <van-cell title="开始时间" class="sTimeMask" style="" is-link :value="getCurrentDate" @click="startPopupShow=true"/>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="结束时间" class="sTimeMask" is-link :value="getEndCurrentDate" @click="endPopupShow=true"/>
        </van-cell-group>
        <!--按钮-->
        <van-row style="padding:10px 0;">
          <van-col span="12" style="padding:0 10px;">
            <van-button class="maskBtn"   @click="timePopup=false,getCurrentDate=getCurrentDatePrev,getEndCurrentDate=getEndCurrentDatePrev">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary" class="maskBtn"   @click="getList">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>
      <!--开始时间的弹出层-->
      <van-popup v-model="startPopupShow" class="stimeMask">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="startTimeFn"
          @cancel="startPopupShow=false"
        />
      </van-popup>
      <!--结束时间的弹出层-->
      <van-popup v-model="endPopupShow" class="stimeMask" >
        <van-datetime-picker
          v-model="endCurrentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="endTimeFn"
          @cancel="endPopupShow=false"
        />
      </van-popup>


      <!--排序弹层-->
      <van-popup v-model="sortShow" @click-overlay="sortShow=false,sortRadio=sortRadioNext" class="mask-paixu" >
        <van-radio-group v-model="sortRadio" style="margin-bottom:10px;">
          <van-cell-group >
            <van-cell title="按销售金额" style="text-align: left;" clickable @click="sortRadio = '1'">
              <van-radio name="1" />
            </van-cell>
            <van-cell title="按销售数量" style="text-align: left;" clickable @click="sortRadio = '2'">
              <van-radio name="2" />
            </van-cell>
            <van-cell title="按库存数量" style="text-align: left;" clickable @click="sortRadio = '3'">
              <van-radio name="3" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <!--按钮-->
        <van-row>
          <van-col span="12"  style="padding:0 10px;">
            <van-button  @click="sortShow=false,sortRadio=sortRadioNext" class="maskBtn">取消</van-button>
          </van-col>
          <van-col span="12"  style="padding:0 10px;">
            <van-button  type="primary" @click="getSortFn" class="maskBtn">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--客户弹层-->
      <van-popup v-model="customer" @click-overlay="customerResult=customerResultPrev" class="kh-Mask"  :overlay="true" style="">

        <div class="stockList" style="overflow: scroll;height:87%;margin-bottom:10px;">
          <div v-if="customerList.length==0" style="color:#ddd;padding:10px 0;font-size:16px;">暂无客户</div>

          <van-checkbox-group v-else  v-model="customerResult">
            <van-cell-group>
              <van-cell
                v-for="(item,index) in customerList"
                :key="index"
                :title="`${item.title}`"
                @click="toggle(index)"
                style="text-align: left"
              >
                <van-checkbox v-if="!item.related_tid" class="kh_box" :name="item.related_tid" ref="checkboxes" disabled/>
                <van-checkbox v-else :name="item.related_tid" ref="checkboxes" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>

        <!--按钮-->
        <van-row >
          <van-col span="8" style="padding:0 10px;">
            <van-button  class="maskBtn"  @click="resetKeHuFn">重置</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button   class="maskBtn"   @click="kehuClose">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  type="primary"   class="maskBtn"  @click="kehuQR">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <!--店仓弹出层-->
      <van-popup v-model="storesShow" @click-overlay="storesResult=storesResultPrev"  :overlay="true" class="dc-Mask">

        <div class="stockList" style="overflow: scroll;height:87%;margin-bottom:10px;">
          <div v-if="stores.length==0" style="padding:10px 0;font-size:16px;">暂无数据( <span style="color:red;">请先选择客户</span>)</div>
          <van-checkbox-group v-else v-model="storesResult">
            <van-cell-group>
              <van-cell style="text-align: left;font-size:12px;" v-for="(item,index) in stores" :title="` ${item.name}`" :key="index" >
                <van-checkbox :name="item.id" @change=""/>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>

        </div>

        <!--按钮-->
        <van-row >
          <van-col span="8" style="padding:0 10px;">
            <van-button  class="maskBtn"    @click="resetDCFn">重置</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <!--closeDcFn getDcFn -->
            <van-button  class="maskBtn"    @click="closeDcFn">取消</van-button>
          </van-col>
          <van-col span="8" style="padding:0 10px;">
            <van-button  type="primary"  class="maskBtn"   @click="getDcFn">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>


      <!--搜索-->
      <van-button class="dealerStatistics-sousuo" @click="goodsShow=true">
        <i class="iconfont icon-fangdajingcopy"></i>
      </van-button>
      <!--商品关键字搜索-->
      <van-popup v-model="goodsShow" @click-overlay="goodsValue=''" class="sousuoMask" >
        <p style="">搜索商品</p>
        <van-cell-group style="margin:5% 3%">
          <van-field v-model="goodsValue" style="border:1px solid #ddd;border-radius:5px;" placeholder="请输入商品信息" />
        </van-cell-group>
        <van-row>
          <van-col span="12" style="padding:0 10px;">
            <van-button class="maskBtn"  @click="goodsValue='',goodsShow=false">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button class="maskBtn" :disabled="searchStatus"  type="primary" @click="onSearh">搜索</van-button>
          </van-col>
        </van-row>
      </van-popup>


      <!--返回-->
      <backs></backs>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
  import backs from "@/components/menu/backPrev";
    export default {
      name: "dealerStatistics",
      computed: {
        ...mapState({
          memberDetails:"data"
        })
      },
      components: {
        backs
      },
      data(){
        return {
          color:'#0D90EB',
          block: "none",
          searchStatus: false,
          //时间弹出层
          timePopup:false,
          startPopupShow:false,//开始时间的弹出层
          minHour: 10,
          maxHour: 20,
          minDate: new Date(2016,1,1),
          maxDate: new Date(2019,12,31),
          currentDate: {},//当前时间
          getCurrentDate:"",
          getCurrentDatePrev:"",//记录上一次的值

          endPopupShow:false,//结束时间的弹出层
          endCurrentDate: {},//本月的最后一天的时间
          getEndCurrentDate:"",
          getEndCurrentDatePrev:"",//记录上一次的值

          //客户
          customer:false,
          customerList:[],//客户列表
          customerResult:[],//选中的值
          customerResultPrev:[],//上一次选中的值

          //店仓
          storesShow:false,
          stores:[],
          storesResult:[],//选中的
          storesResultPrev:[], // 上一次选中的

          //商品关键字过滤
          goodsShow:false,
          goodsValue:"",
          goodsValuePrev:"",

          //排序方式
          sortShow:false,
          sortRadio:"2",
          sortRadioNext:"2",//存入上一次的选项

          //获取数据
          page:1,
          pageSize:20,
          total:0,
          dataList:[],
          loading: false,
          finished: false,
          kucun:0, // 库存
          rk_money:0,// 入库总金额
          rk_num:0, // 入库总数
          th_money:0, // 退货总金额
          th_num:0, // 退货总数
          xs_money:0, // 销售总金额
          xs_num:0,  // 销售总数
        }
      },
      methods: {
        //获取数据
        getAllFn(){
          var $this = this;
          this.$http.item.post('/report/dealerReport',{
            curPage: $this.page,                           //页数
            pageSize: $this.pageSize,                         // 每页条数
            startTime: $this.getCurrentDate,     //开始时间
            endTime: $this.getEndCurrentDate,       // 结束时间
            customerId: $this.customerResult,                       //客户的租户id数组
            storeId: $this.storesResult,                          //客户店仓id数组
            keyword: $this.goodsValuePrev,                   // 商品关键字
            order: $this.sortRadio                          // 排序方式 – 1.按销售金额，2.销售数量(默认)，3.库存数量
          })
            .then(function (response) {
              // console.log(response.data)
              var empId = localStorage.getItem('empId')
              if(empId&&response.data.code){
                $this.$toast.fail(response.data.message);
                $this.$router.go(-1)
                return;
              }
              $this.page++;
              $this.total = response.data.data.allsize;
              $this.kucun = response.data.data.kucun;
              $this.rk_money = response.data.data.rk_money;// 入库总金额
              $this.rk_num = response.data.data.rk_num; // 入库总数
              $this.th_money = response.data.data.th_money; // 退货总金额
              $this.th_num = response.data.data.th_num; // 退货总数
              $this.xs_money = response.data.data.xs_money; // 销售总金额
              $this.xs_num = response.data.data.xs_num;  // 销售总数

              for (let i = 0; i < response.data.data.info.length; i++) {
                $this.dataList.push(response.data.data.info[i]);
              }

              $this.loading = false;
              // console.log(response.data.data.data);
              if(!response.data.data.info.length){
                $this.dataList="未找到相关数据";
                $this.finished = true;
                $this.block = 'none'
              }else if ($this.dataList.length >= $this.total) {
                $this.finished = true;
                $this.block = 'block'
              }
                // console.log($this.dataList)
              $this.searchStatus=false;
            })
            .catch(function (error) {
              $this.$toast.fail('登陆过期，请重新登陆');
              console.log(error);
            });
        },
        //跳转详情
        infoFn(customerId,storeId,customerName){
          // console.log(customerId);
          // console.log(storeId);
          this.$router.push({name: 'dealerStatisticsInfo',params:{
              url:"dealerStatistics",
              customerId:customerId,
              storeId:storeId,
              customerName:customerName
            }});
        },
        //给开始、结束时间赋值
        getNowTime(){
          //获取开始时间
          var myDate = new Date();
          var mytime=myDate.getMonth();
          var y=myDate.getFullYear();

          this.currentDate=new Date(y,mytime,1);

          var y = this.currentDate.getFullYear();
          var m = this.currentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.currentDate.getDate();
          d = d < 10 ? ('0' + d) : d;

          this.minDate=new Date(1900,0,1);
          // this.minDate=new Date(y,m-1,d);
          //获取选择的当前时间
          this.getCurrentDate=y + '-' + m + '-' + d+" 00:00:00";
          this.getCurrentDatePrev=y + '-' + m + '-' + d+" 00:00:00";


          //结束时间
          this.endCurrentDate=new Date(y,mytime+1,0);
          var y2 = this.endCurrentDate.getFullYear();
          var m2 = this.endCurrentDate.getMonth() + 1;
          m2 = m2 < 10 ? '0' + m2 : m2;
          //构造一个日期对象：获取当月的最后一天
          var day = new Date(y2,m2,0);
          //获取天数：
          var d2 = day.getDate();
          //获取选择的结束时间
          this.getEndCurrentDate=y2 + '-' + m2 + '-' + d2+" 23:59:59";
          this.getEndCurrentDatePrev=y2 + '-' + m2 + '-' + d2+" 23:59:59";

          this.maxDate=new Date(y2,m2-1,d2,23,59,59);

        },
        //点击开始时间的确定按钮
        startTimeFn(){
          this.startPopupShow=false;//隐藏弹出层
          var y = this.currentDate.getFullYear();
          var m = this.currentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.currentDate.getDate();
          d = d < 10 ? ('0' + d) : d;

          var hour = this.currentDate.getHours() < 10 ? "0" + this.currentDate.getHours() : this.currentDate.getHours();
          var minute = this.currentDate.getMinutes() < 10 ? "0" + this.currentDate.getMinutes() : this.currentDate.getMinutes();
          //获取选择的当前时间
          this.getCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":00";

          // this.getCustomerAccountInfo();
        },
        //点击结束时间的确定按钮
        endTimeFn(){
          this.endPopupShow=false;//隐藏弹出层
          var y = this.endCurrentDate.getFullYear();
          var m = this.endCurrentDate.getMonth() + 1;
          m = m < 10 ? '0' + m : m;
          var d = this.endCurrentDate.getDate();
          d = d < 10 ? ('0' + d) : d;
          var hour = this.endCurrentDate.getHours() < 10 ? "0" + this.endCurrentDate.getHours() : this.endCurrentDate.getHours();
          var minute = this.endCurrentDate.getMinutes() < 10 ? "0" + this.endCurrentDate.getMinutes() : this.endCurrentDate.getMinutes();
          //获取选择的时间
          this.getEndCurrentDate=y + '-' + m + '-' + d+" "+hour+":"+minute+":59";


          // this.getCustomerAccountInfo();

        },
        //时间弹层的确定按钮
        getList(){
          this.timePopup=false;
          this.page=1;
          this.dataList=[];
          this.loading = true;
          this.finished = false;
          this.block = "none";
          this.getAllFn();
        },
        //搜索确定按钮
        onSearh(){
          this.goodsShow=false;
          this.searchStatus=true;
          this.goodsValuePrev=this.goodsValue;
          this.dataList=[];
          this.block = "none";
          this.page=1;
          this.loading = true;
          this.finished = false;
          this.getAllFn();
        },
        //排序的确定按钮
        getSortFn(){
          this.sortShow=false;
          this.sortRadioNext=this.sortRadio;
          this.dataList=[];
          this.page=1;
          this.loading = true;
          this.finished = false;
          this.block = "none";
          // console.log(this.sortRadioNext)
          this.getAllFn();
        },
        // 客户列表
        customerFn(){
          var $this=this;
          this.$http.setting.get('customer',{

          })
            .then(function (response) {
              var empId = localStorage.getItem('empId')
              if(empId&&response.data.code){
                $this.$toast.fail(response.data.message);
                // $this.$router.go(-1)
                return;
              }
              // console.log(response.data)
              if(!response.data.data.length){
                $this.customerList = [];
                return;
              }
              $this.customerList = response.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        // 客户列表的点击
        toggle(index){
          // this.$refs.checkboxes[index].toggle();
          // console.log(this.customerResult)
        },
        resetKeHuFn(){
          this.customerResult= [];
        },
        resetDCFn(){
          this.storesResult= [];
        },
        //客户弹层取消按钮
        kehuClose(){
          this.customerResult = this.customerResultPrev;
          this.customer = false;
          // console.log(this.customerResult)
        },
        // 客户弹层的确定按钮
        kehuQR(){
          this.customer = false;
          this.page = 1;
          this.dataList=[];
          this.loading = true;
          this.block = "none";
          this.customerResultPrev = this.customerResult;
          this.getAllFn();
          this.getStoresFn();
        },
        // 获取店仓
        getStoresFn(){
          var $this = this;
          this.$http.setting.post('store/search',{
            tid : $this.customerResult
          }).then(res => {
            // console.log(res.data)
            if(!res.data.code){
              $this.stores = res.data.data;
            }else{
              $this.stores = [];
              // this.$message.error(res.data.messge)
            }
          })
        },
        // 店仓的确定按钮
        getDcFn(){
          this.storesShow = false;
          this.page = 1;
          this.dataList=[];
          this.loading = true;
          this.block = "none";
          this.storesResultPrev = this.storesResult
          this.getAllFn();
        },
        // 店仓的取消按钮
        closeDcFn(){
          this.storesShow = false;
          this.storesResult = this.storesResultPrev
        },

      },
      mounted(){
        this.getNowTime();
        this.customerFn();
      }
    }
</script>

<style scoped>
  .dealerStatistics{
    font-size:14px;
    color:#666;
  }
  .dealerStatistics-sousuo{
    position: fixed;
    bottom:170px;
    right:10px;
    background:rgba(0,0,0,.5);
    width:55px;
    height:55px;
    color:#fff;
    font-size:12px;
    padding:12px 0;
    border-radius: 8px;
    line-height: initial;
  }
  .dealerStatistics-top{
    position: fixed;
    top:0;
    left:0;
    background: #fff;
    width:100%;
  }
  .dealerStatistics-menu{
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom:1px solid #ddd;
    margin-top:45px;
    background: #fff!important;
    position: fixed;
    top:0;
    left:0;
    color:#000;
  }
  .kh_box span{
    color:#ccc!important;
  }
  .dealerStatistics-content{
    margin-top:185px;
    margin-bottom:27px;
    padding:5px;
  }
  .dealerStatistics-bottom{
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    border-top:1px solid #ccc;
    padding:5px;
    font-size:12px;
    background: #fff;
  }

  .timeMask{
    width:320px;padding:5px 0;background: #fff!important;border-radius: 5px;
  }
  .sTimeMask{
    text-align: left;border-top:1px solid #e5e5e5;
    font-size:12px;
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .stimeMask{
    width:320px;border-radius:5px;
  }
  .mask-paixu{
    width:320px!important;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .kh-Mask{
    width:320px!important;
    height:426px;
    padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .dc-Mask{
    width:320px!important;height:426px;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .sousuoMask{
    width:320px!important;padding:10px 0;background: #fff!important;border-radius: 5px;
  }
  .sousuoMask>p{
    font-size:16px;color:#888
  }


</style>
